<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所属地区选择-办事指南查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{overflow: hidden;}
			/*其他*/
			.mui-bar-nav~.mui-content{padding:0;margin-top:.9rem;}
			.mui-slider-item{min-height:10rem;}
			.mui-sliders{position:absolute;z-index:1;width:100%;overflow:hidden;margin:0 auto;background:#fff;}
			.mui-sliders .mui-slider-groups{position: absolute; top:1.6rem;bottom: 0;width: 100%;height: auto;overflow:auto;}
			.mui-sliders .mui-slider-groups .mui-slider-item {position: relative;display: inline-block;width: 100%;
   			 height: 100%;vertical-align: top; white-space: normal;}
			/*切换菜单*/
			.mui-segmented-control{width:7rem;overflow:hidden;margin:0 auto;background:#f4f4f4;border-radius:.1rem;height:.82rem;line-height:.82rem;margin-bottom:.4rem;margin-top:.63rem;}
			.mui-segmented-control .mui-control-item{line-height:.82rem;font-size:.3rem;}
			.mui-segmented-control .mui-control-item{color:#666}
			.mui-segmented-control .mui-control-item.mui-active{background:#1653fc;color:#fff;border-radius:.1rem;}
			.mui-segmented-control .mui-control-item,.mui-segmented-control{border:none;}
			/*地址列表*/
			.address_list{width:100%;float:left;padding:0;margin:0;}
			.address_list>li{width:100%;float:left;position:relative;}
			.address_list>li:after{right:0; bottom:0;left:.22rem;height:1px;content:'';background-color:#eaeaea;position:absolute;}
			.address_list>li>a{display:block;width:100%;box-sizing:border-box;padding:0 .4rem;height:.95rem;line-height:.95rem;font-size:.3rem;color:#333;position:relative;}
			.address_list>li>a:after{font-family: Muiicons;line-height: 1;position: absolute;top:30%;display: inline-block;text-decoration: none;content: '\e583';right:.32rem;color: #c8c8c8;font-size:.4rem;}
		    .address_show{width:7rem;overflow:hidden;position:absolute;top:.15rem;left:.25rem;padding-left:.1rem;}
		    .address_show>span{float:left;color:#333;font-size:.28rem;}
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="mui-bar mui-bar-nav" id="mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<!--<a class="back mui-action-back">返回</a>-->
			<h1 class="mui-title">所属地区</h1>
			<div class="fr">
		    	<a class="collect_icon"></a>
		    	<a class="share_icon"></a>
		    </div>
		</div>
		<div class="mui-content" id="mui-content">
			<div class="mui-sliders">
				<div class="address_show">
					<span id="addressShow"></span>
				</div>
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1" id="title1">
						市
					</a>
					<a class="mui-control-item" href="#item2" id="title2">
						县(市、区)
					</a>
					<a class="mui-control-item" href="#item3" id="title3">
						乡镇街道
					</a>
					<a class="mui-control-item" href="#item4" id="title4">
						社区、村
					</a>
				</div>
				<div class="mui-slider-groups">
					<div id="item1" class="mui-control-content mui-active">
						<div id="scroll1">
							<div class="mui-scroll">
								<ul class="address_list" id="addList1">
									<!--<li><a>武汉市</a></li>
									<li><a>襄阳市</a></li>-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item2" class="mui-control-content">
						<div id="scroll2">
							<ul class="address_list" id="addList2">
								
							</ul>
						</div>
					</div>
					<div id="item3" class="mui-control-content">
						<div id="scroll3">
							<ul class="address_list" id="addList3">
								
							</ul>
						</div>
					</div>
					<div id="item4" class="mui-control-content">
						<div id="scroll4">
							<ul class="address_list" id="addList4">
								
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script>
		function my_immersed(immersed){
			document.getElementById("mui-bar-nav").style.paddingTop = immersed + 'px';
			document.getElementById("mui-bar-nav").style.height = (44 + immersed) + 'px';
			document.getElementById("mui-content").style.marginTop = (40 + immersed) + 'px';
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/app.js"></script>
	<script>
		$('.mui-sliders').height($(window).height()-$('.mui-bar-nav').height()-immersed);
		var sheng;//省
		var shi;//市
		var xian;//县、区
		var jiedao;//乡镇、街道
		var shequ;//社区、村
		//获取数据
		mui.plusReady(function(){
			var curSite = getCurrentSite();
			document.getElementById("addressShow").innerHTML = curSite.name;
			//重写back
			mui.back = function(){
				plus.webview.currentWebview().opener().show('fade-in',100);
				plus.webview.currentWebview().hide('zoom-fade-in',300);
			}
			utils.ajax('appHttpService/appDistrictByTree.do',function(data){
				var data = JSON.parse(data);
				if (data.code === '0') {//成功
					var strList = eval(data.result);
					//初始化数据
					sheng = strList[0];
					shi = strList[1];
					xian = strList[2];
					jiedao = strList[3];
					shequ = strList[4];
					var shiUlEle = document.getElementById("addList1");
					//先加当前区划
					var shengObj = sheng[0];
					if(shengObj){
						var liEle = createElm('li',{id:shengObj.id,isPrev:'1'},'<a>'+shengObj.name+'本级</a>')
						shiUlEle.appendChild(liEle);
					}
					if(shi){
						//遍历市
						for(var i in shi) {
							var shiObj = shi[i];
							var liEle = createElm('li',{id:shiObj.id},'<a>'+shiObj.name+'</a>');
							shiUlEle.appendChild(liEle);
						}
					}
					
					//关闭进度条
					closeWaitingAndShowView();
					//市级列表绑定事件
					mui('#addList1').on('tap','li',function(){
						if(loadEle(this, xian)){
							//县级列表绑定事件
							mui('#addList2').on('tap','li',function(){
								if(loadEle(this, jiedao)){
									//街道级列表绑定事件
									mui('#addList3').on('tap','li',function(){
										if(loadEle(this, shequ)){
											//社区级列表绑定事件
											mui('#addList4').on('tap','li',function(){
												selectDistrict(this);
											});
										} else {
											selectDistrict(this);
										}
									});
								} else {
									selectDistrict(this);
								}
							});
						} else {
							selectDistrict(this);
						}
					});
				} else{
					mui.toast(data.result);
				}
			});
			//title点击切换
			mui("#segmentedControl").on('tap','.mui-control-item',function(){
				var hrefStr = this.getAttribute("href");
				$('.mui-control-item').removeClass("mui-active");
				$(this).addClass("mui-active");
				$('.mui-control-content').hide();
				$(hrefStr).show();
			});
		});
		/**
		 * 加载区划到列表
		 * @param {Object} eleObj 元素对象
		 * @param {Object} disObj 区划对象
		 * @return {Boolean} 是本级区划返回false，否则返回true
		 */
		function loadEle(eleObj, disObj){
			var isPrev = eleObj.getAttribute("isPrev");
			if (isPrev == '1') {//是本级区划直接返回
				return false;
			}
			var id = eleObj.getAttribute("id");
			var name = eleObj.childNodes[0].innerHTML;
			var slideNum = curentSlideNumber();
			//更新address_show
			var curTitEle = document.getElementById('tit'+slideNum);
			var nextAllTitEle = $(curTitEle).nextAll();
			nextAllTitEle.remove();
			$(curTitEle).remove();
			var title = document.getElementsByClassName('address_show')[0];
			var spanEle = createElm('span',{id:'tit'+slideNum},'/'+name,null);
			title.appendChild(spanEle);
			//加载区划
			var addrId = "addList" + (slideNum + 1);
			//取消事件
			mui("#" + addrId).off('tap','li');
			var UlEle = document.getElementById(addrId);
			UlEle.innerHTML = "";
			//先加当前区划
			var prevLiEle = createElm('li',{id:id,isPrev:'1'},'<a>'+name+'本级</a>');
			UlEle.appendChild(prevLiEle);
			for (var i in disObj) {
				var dis = disObj[i];
				if (dis.pId == id) {
					var liEle = createElm('li',{id:dis.id},'<a>'+dis.name+'</a>');
					UlEle.appendChild(liEle);
				}
			}
			//切换到下一个
			nextItem(slideNum + 1);
			return true;
		}
		/**
		 * 点击返回当前选中区划id和名称到指定页面
		 * @param {Object} eleObj
		 */
		function selectDistrict(eleObj) {
			var id = eleObj.getAttribute("id");
			var name = eleObj.childNodes[0].innerHTML;
			localStorage.setItem("districtName",name);
			//移除部门
			localStorage.removeItem("orgName");
			var workView = plus.webview.getWebviewById("tab-webview-subpage-work.html");
			mui.fire(workView,"updateDistrict",{"id":id,"name":name});
			//办事指南列表页面
			var bsznListView = plus.webview.getWebviewById("../work/bszn_list.html");
			mui.fire(bsznListView,"updateDistrict",{"id":id,"name":name});
			mui.back();
		}
		//跳至下一个
		function nextItem(slideNum){
			var segCont = document.getElementById("segmentedControl");
			segCont.querySelector('.mui-active').classList.remove('mui-active');
			segCont.querySelector('#title'+slideNum).classList.add('mui-active');
			$('.mui-control-content').hide();
			$('#item'+slideNum).show();
			
		}
		//获取当前位置
		function curentSlideNumber(){
			var segCont = document.getElementById("segmentedControl");
			var activeEle = segCont.querySelector('.mui-active');
			var hrefAtt = activeEle.getAttribute("href");
			return parseInt(hrefAtt.substr("#item".length));
		}
	</script>
	</body>
</html>
